<!DOCTYPE html>
<html>
  <head>
    <!-- 页面meta -->
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>黑马面面</title>
    <meta name="description" content="黑马面面" />
    <meta name="keywords" content="黑马面面" />
    <meta
      content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"
      name="viewport"
    />
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../css/element-ui.css" />
    <link
      rel="stylesheet"
      href="../plugins/font-awesome/css/font-awesome.min.css"
    />
    <link rel="stylesheet" href="../css/style.css" />
  </head>

  <body class="hold-transition">
    <div id="app">
      <div class="content-header common-search-border1">
        <el-button class="butAdd" @click="handleCreate"
          ><i class="fa fa-plus" aria-hidden="true"></i> 新增学科</el-button
        >
      </div>
      <div class="app-container">
        <div class="box common-search-border2">
          <div class="filter-container">
            <!-- 搜索栏 -->
            <el-form
              :inline="true"
              :model="requestParameters"
              ref="requestParameters"
              class="formInfo"
              label-width="70px"
            >
              <el-form-item label="学科名称" prop="name">
                <el-input
                  placeholder="请输入"
                  v-model="requestParameters.name"
                  style="width: 200px"
                  class="filter-item"
                ></el-input>
              </el-form-item>
              <el-form-item label="是否显示" prop="status">
                <el-select
                  placeholder="请选择"
                  v-model="requestParameters.status"
                >
                  <el-option
                    :key="item.id"
                    :label="item.value"
                    :value="item.id"
                    v-for="item in baseData.isShow"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button @click="handleRest">清除</el-button>
                <el-button type="primary" class="butOK" @click="handleSearch"
                  >搜索</el-button
                >
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div class="box common-table-border" style="margin: 8px 0 0">
          <el-table :data="items" fit highlight-current-row style="width: 100%">
            <el-table-column label="序号" align="center" width="50px">
              <template slot-scope="scope">
                <span>{{ scope.$index+1 }}</span>
              </template>
            </el-table-column>
            <el-table-column label="学科名称" align="center">
              <template slot-scope="scope">
                <span class="link-type">{{ scope.row.name }}</span>
              </template>
            </el-table-column>
            <el-table-column label="创建者" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.creator }}</span>
              </template>
            </el-table-column>
            <el-table-column label="创建日期" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.createDate | dateTransform }}</span>
              </template>
            </el-table-column>
            <el-table-column label="前台是否显示" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.isShow === 0 ? '是': '否' }}</span>
              </template>
            </el-table-column>
            <el-table-column label="二级目录" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.catalogQty }}</span>
              </template>
            </el-table-column>
            <el-table-column label="标签" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.tagQty }}</span>
              </template>
            </el-table-column>
            <el-table-column label="题目数量" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.questionQty }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              align="center"
              class-name="small-padding fixed-width"
              width="400px"
            >
              <template slot-scope="scope">
                <div class="operation">
                  <el-button
                    type="primary"
                    size="mini"
                    @click="goToCatalogView(scope.row)"
                    ><i class="fa fa-superpowers" aria-hidden="true"></i>
                    学科目录
                  </el-button>
                  <el-button
                    type="primary"
                    size="mini"
                    @click="goToTagView(scope.row)"
                    ><i class="fa fa-superpowers" aria-hidden="true"></i>
                    学科标签
                  </el-button>
                  <el-button
                    type="primary"
                    size="mini"
                    @click="handleUpdate(scope.row)"
                    ><i class="fa fa-pencil-square-o" aria-hidden="true"></i>
                    修改
                  </el-button>
                  <el-button
                    size="mini"
                    type="danger"
                    @click="handleDeleted(scope.row)"
                    ><i class="fa fa-trash-o" aria-hidden="true"></i>
                    删除
                  </el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination-container">
            <el-pagination
              class="pagiantion"
              v-show="pagination.total>0"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pagination.pageNum"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="pagination.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pagination.total"
            >
            </el-pagination>
          </div>
        </div>
        <!-- 新增学科弹层 -->
        <el-dialog
          title="新增学科"
          :visible.sync="dialogFormVisible"
          width="40%"
          top="8vh"
        >
          <el-form label-width="120px" :model="form" :rules="rules" ref="form">
            <el-form-item label="学科：" prop="name">
              <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="是否显示：" prop="isShow">
              <el-switch
                v-model="form.isShow"
                :active-value="0"
                :inactive-value="1"
              ></el-switch>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="handleCancel">取 消</el-button>
            <el-button type="primary" @click="handleConfirm">确 定</el-button>
          </div>
        </el-dialog>
        <!-- end -->
      </div>
    </div>
  </body>
  <!-- 引入组件库 -->
  <script src="../js/vue.js"></script>
  <script src="../js/element-ui.js"></script>
  <script src="../plugins/jquery/dist/jquery.js"></script>
  <script src="../js/data.json"></script>
  <script src="../js/axios-0.18.0.js"></script>
  <script src="../js/base.js"></script>
  <script>
    new Vue({
      el: "#app",
      data() {
        return {
          pagination: {
            total: 0,
            pageNum: 1,
            pageSize: 10,
          },
          loading: false,
          items: [],
          baseData: base,
          requestParameters: {
            name: "",
            status: "",
          },
          dialogFormVisible: false,
          form: {
            id: 0,
            name: "",
            isShow: 0,
          },
          rules: {
            name: [
              {
                required: true,
                message: "请填写",
                trigger: "blur",
              },
            ],
          },
        };
      },
      //生命周期方法，加载完成后
      mounted() {
        this.getList();
      },

      filters: {
        dateTransform: (value) => {
          //
          //日期的操作格式化，先判断日期为null不可以格式化
          if (value == null) {
            return ""; //日期如果为空，返回空字符串
          }

          let index = value.lastIndexOf(".");
          return index > 0 ? value.substr(0, index) : value.substr(0, 10);
        },
      },

      methods: {
        // 学科分页列表
        getList() {
          // 必传参数
          let params = {
            currentPage: this.pagination.pageNum,
            pageSize: this.pagination.pageSize,
            queryParams: {},
          };

          //对请求消息进行捆绑，封装回前端请求对象
          let queryParams = {};
          let status = this.requestParameters.status;
          queryParams.status = status;

          let name = this.requestParameters.name;
          queryParams.name = name;
          //封装回前端请求对象
          params.queryParams = queryParams;

          console.log("学科分页列表请求参数：");
          console.log(params);
          // 发送请求获取数据
          //this.pagination.total = response.data.result.total;
          //this.items = response.data.result.rows;
          // 发送请求获取数据
          axios
            .post(app_path + "/course/findListByPage.do", params)
            .then((result) => {
              if (result.data.flag) {
                //分页处理请求成功
                this.pagination.total = result.data.result.total;
                //更新当前页数据列表
                this.items = result.data.result.rows;
              } else {
                this.$message.error(result.data.message);
              }
            });
        },

        // 清除
        handleRest() {
          if (this.$refs["requestParameters"]) {
            this.$refs["requestParameters"].resetFields();
            //this.getList();   //点击清除，重新刷新页面数据
          }
        },
        // 搜索
        handleSearch() {
          this.getList();
        },
        handleSizeChange(val) {
          this.pagination.pageSize = val;
          this.pagination.pageNum = 1;
          this.getList();
        },
        handleCurrentChange(val) {
          this.pagination.pageNum = val;
          this.getList();
        },
        // 学科目录
        goToCatalogView(row) {
          window.location.href = "catalogList.html?courseId=" + row.id;
        },
        // 学科标签
        goToTagView(row) {
          window.location.href = "tagList.html?courseId=" + row.id;
        },
        // 新增学科
        handleCreate() {
          if (this.$refs["form"]) {
            this.$refs["form"].resetFields();
          }
          this.dialogFormVisible = true;
        },
        // 修改学科
        handleUpdate(row) {
          if (this.$refs["form"]) {
            this.$refs["form"].resetFields();
          }
          this.form.id = row.id;
          this.form.name = row.name;
          this.form.isShow = row.isShow;
          console.log(this.form);

          this.dialogFormVisible = true;
        },
        //点击确认按钮的处理
        handleConfirm() {
          if (!this.form.id) {
            //没有相应学科数据则创建
            this.handleCreateConfirm();
          } else {
            //有相应学科数据则更新
            this.handleUpdateConfirm();
          }
        },

        //新增学科确定
        handleCreateConfirm() {
          this.$refs["form"].validate((valid) => {
            if (valid) {
              //在点击添加课程按钮时，
              //友好的正确消息提示框
              // this.$message({
              // 	message:'验证通过',
              // 	type: 'success'
              // });

              axios
                .post(app_path + "/course/add.do", this.form)
                .then((result) => {
                  if (result.data.flag) {
                    //添加成功
                    this.$message({
                      message: "添加学科成功",
                      type: "success",
                    });
                    //将新增学科弹出对话框隐藏，并清空表单数据
                    if (this.$refs["form"]) {
                      this.$refs["form"].resetFields();
                    }
                    this.dialogFormVisible = false; //隐藏对话框

                    this.getList(); //新增学科时加载显示界面
                  } else {
                    this.$message({
                      message: result.data.message,
                      type: "error",
                    });
                  }
                })
                .catch((err) => {
                  this.$message({
                    message: err.message,
                    type: "error",
                  });
                  return false;
                });
            } else {
              this.$message({
                message: "还没有输入相应学科，请输入",
                type: "error",
              });
              return false;
            }
          });
        },

        // 修改学科确定
        handleUpdateConfirm() {
          this.$refs["form"].validate((valid) => {
            if (valid) {
              axios
                .post(app_path + "/course/update.do", this.form)
                .then((result) => {
                  if (result.data.flag) {
                    this.$message.success("修改成功");
                    this.dialogFormVisible = false;
                    this.getList();
                  } else {
                    this.$message.error(result.data.message);
                  }
                });
            } else {
              console.log("error submit!!");
              return false;
            }
          });
        },

        // 新增/修改学科取消
        handleCancel() {
          this.dialogFormVisible = false;
        },

        // 删除学科
        handleDeleted(row) {
          this.$confirm("此操作将永久删除该学科，是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              let courseId = row.id;
              axios
                .get(app_path + `/course/delete.do?courseId=${courseId}`)
                .then((result) => {
                  if (result.data.flag) {
                    this.$message.success(result.data.message);
                    this.getList();
                  } else {
                    this.$message.error(result.data.message);
                  }
                });
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消删除",
              });
            });
        },
      },
    });
  </script>
</html>
